<script setup>
import { get } from '@/request/request';
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { ref } from 'vue';
import { config } from "@/config";

const searchValue = ref('');
const page = ref('1');
const lists = ref({})


const searchBtnClickEvent = (value) => {
  console.log('searchBtnClickEvent', value);
  if (value) {
    get('/public_api/material_list', { page: page.value, key: value, grade: 0, cat: 0 }).then(res => {
      console.log(res.data);
      const data = res.data;
      if (data.list.length > 0) {
        lists.value = data;
      } else {
        uni.showToast({
          title: '暂时没有你搜索的内容',
          icon: 'error'
        })
      }

    });
  } else {
    // 如果 value 为空，则不发起网络请求
    uni.showToast({
      title: '搜索内容不能为空',
      icon: 'error'
    })
  }
};

const experience = () => {
  uni.navigateTo({
    url: '/pages/material/components/file-preview'
  })
}
</script>

<template>
  <view class="app">
    <view class="search">
      <TnSearchBox v-model="searchValue" size="sm" shape="round" search-button-text-color="#fff"
        search-button-bg-color="#0052D9" placeholder="输入你想要的知道的内容..." :clearable="false"
        @search="searchBtnClickEvent" />
    </view>
    <view v-for="(item, index) in lists.list" :key="index" class="information">
      <image :src="config.baseUrl + '/file/' + item.img" />
      <view class="introduce">
        <text style="font-size: 32rpx">{{ item.title }}</text>
        <view style="font-size: 24rpx">格式：{{ item.extend }}</view>
        <view class="experience">
          <view class="nce">
            <image src="/static/material/eye.svg" />
            <text>{{ item.preview }}次浏览</text>
          </view>
          <view class="nce">
            <image src="/static/material/support.svg" />
            <text>{{ item.likes }}</text>
          </view>
          <view class="btn" @click="experience">立即体验</view>
        </view>
      </view>
    </view>
  </view>

</template>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .search {
    margin: 10rpx;
    width: 95%;
    background: #f1f1f1;
  }

  .information {
    padding: 10rpx;
    margin: 16rpx;
    height: 200rpx;
    width: 694rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: left;

    image {
      width: 152rpx;
      height: 200rpx;
      margin: -9rpx;
    }

    .introduce {
      margin: 30rpx;
      height: 200rpx;
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;

      .experience {
        height: 56rpx;
        width: 480rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .nce {
          display: flex;
          align-items: center;
          justify-content: center;

          image {
            margin: 10rpx;
            height: 24rpx;
            width: 24rpx;
          }

          text {
            font-size: 24rpx;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 56rpx;
          width: 152rpx;
          border-radius: 9999rpx;
          border: 2rpx solid #0052D9;
          color: #0052D9;
          font-size: 28rpx;
          font-weight: 800;
        }
      }
    }
  }
}
</style>
